<template>
  <div class="about">
    <div class="header">
      <!-- 页头 -->
      <no-data></no-data>
      <div class="header-join">
        <h1 class="h-h1">多了解TA们</h1>
        <h1>更好地和TA们相处</h1>
        <h2>无条件的爱，是相互的，多给彼此一些耐心</h2>
      </div>
    </div>
    <aside>
      <h1>宠物学堂</h1>
      <h2>PET SCHOOL</h2>
    </aside>
    <section>
      <h1>
        <div :class="`dog ${sel1}`" @click="bg1">狗狗</div>
        <div :class="`cat ${sel2}`" @click="bg2">猫咪</div>
        <div :class="`hot ${sel3}`" @click="bg3">热议</div>
      </h1>
    </section>
    <ul class="ul-dog ul-content" style="display: block; height: 2000px">
      <li v-for="(item,i) in mydata" :key="i">
        <a href="http://www.viptail.epet.com/share/long_article.html?id=366456"
          ><img
            :src="item.url"
            alt=""
          />
          <div>
            <h3>{{item.title}}</h3>
            <h5>{{item.tit}}</h5>
            <br />
            <div>{{item.time}}</div>
          </div></a
        >
      </li>
    </ul>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyFooter from "../components/MyFooter.vue";
import NoData from "../components/NoData.vue";
export default {
  components: { NoData, MyFooter },
  mounted() {
    this.myaxios()
  },
  data() {
    return {
      mydata:[],
      sel1: "select",
      sel2: "",
      sel3: "",
    };
  },
  methods: {
    myaxios(){
      this.axios.post("/issql").then((ret) => {  
        this.mydata=ret.data.data;
        console.log(this.mydata);
      })
    },
    bg1() {
      this.sel1 = "select";
      this.sel2 = "";
      this.sel3 = "";

    },
    bg2() {
      this.sel2 = "select";
      this.sel1 = "";
      this.sel3 = "";
    },
    bg3() {
      this.sel1 = "";
      this.sel2 = "";
      this.sel3 = "select";
    },
  },
};
</script>

<style lang="scss">
.about {
  section {
    h1 {
      div {
        display: inline-block;
        width: 75px;
        height: 60px;
        text-align: center;
        color: #282828;
        font-weight: 500;
        font-size: 25px;
        margin-right: 40px;
      }
      .select {
        color: #fbc02d;
        border-bottom: 5px solid #fbc02d;
      }
      width: 1200px;
      margin: 0 auto;
      font-size: 0;
    }
    // background: #f1f1f1;
    font-size: 28px;
    height: 110px;
    padding: 20px 120px;
  }
  aside {
    h1 {
      font-size: 31px;
    }
    h2 {
      font-size: 20px;
    }
    h1,
    h2 {
      width: 1200px;
      margin: 0 auto;
    }
    background: #333;
    color: #fbc02d;
    padding: 25px 0;
  }
  .header {
    h2 {
      font-size: 20px;
      color: #fff;
      width: 1200px;
      margin: 20px auto;
    }
    h1 {
      text-align: justify;
      font-weight: normal;
      font-size: 35px;
      color: #fff;
      width: 1200px;
      margin: 0 auto;
      line-height: 1.3;
    }
    .h-h1 {
      margin-top: -320px;
    }
    background: url(http://viptail.image.alimmdn.com/files/official_web/img/huide_chongwuxuetang_top.jpg)
      center top no-repeat;
    background-size: cover;
    height: 560px;
  }
}
</style>